<template>
<!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/UserInfo/UserQuery">用户列表</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>用户信息修改</el-breadcrumb-item>
  </el-breadcrumb>
</div>

  <el-form ref="ruleFormRef" style="max-width: 600px;margin: auto;" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
    
    <el-form-item label="工号" prop="no">
      <el-input v-model="form.no" placeholder="请输入工号" />
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" placeholder="请输入姓名" />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入邮箱" />
    </el-form-item>

    <el-form-item label="电话" prop="phone">
      <el-input v-model="form.phone" placeholder="请输入电话" />
    </el-form-item>

    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="form.sex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="头像:" prop="avatar">
        <!-- <el-upload class="avatar-uploader" action="http://localhost:16822/api/CargoOwner/GetPicName" :show-file-list="false" :on-success="handleAvatarSuccess">
        <img v-if="form.avatar" :src="'http://localhost:16822/Pic/'+form.avatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload> -->
  </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交修改</el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import {useRoute,useRouter} from 'vue-router'

//图片上传
import { Plus } from '@element-plus/icons-vue'
const handleAvatarSuccess = (val:any) => {
    form.driverLicenseImg = val
}

const route = useRoute();
const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

onMounted(() => {
  BackInfo()
})

const form: any = reactive({
  login_name: "",
  password: "",
  no: "",
  name: "",
  email: "",
  phone: "",
  user_type: '',
  sex: '',
  mgr_type: 0,
  avatar: "/",
  login_flag: 1
})

//校验
const rules = reactive<FormRules>({
  login_name: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  no: [
    { required: true, message: '请输入工号', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
  ],
  user_type:  [
    { required: true, message: '请选择用户类型', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'blur' },
  ],
  // avatar: [
  //   { required: true, message: '请输入头像', trigger: 'blur' },
  // ],
})

// //反填
const BackInfo = () => {  
  axios.get('http://1.117.93.87:8000/rbacdu/api/User/UserFindId',{
    params: {
      id: route.query.id
    }
  }).then(res=>{
    console.log(res);
    let backData = res.data.data;
    form.login_name=backData.login_name,
    form.password=backData.password,
    form.no=backData.no,
    form.name=backData.name,
    form.email=backData.email,
    form.phone=backData.phone,
    form.user_type=backData.user_type,
    form.sex=backData.sex,
    form.mgr_type=backData.mgr_type,
    form.avatar=backData.avatar,
    form.login_flag=backData.login_flag
  }).catch(err=>{
    console.log(err);
    
  })    
}

//提交修改
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let userUpdate = {
        id: route.query.id,
        no: form.no,
        name: form.name,
        email: form.email,
        phone: form.phone,
        sex: form.sex,
        avatar: form.avatar,
      }
      axios.put('http://1.117.93.87:8000/rbacxie/api/User/userUpdate',userUpdate).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          ElMessage.success("修改成功!")
          router.push('UserQuery')
        } else if (res.data.code == 201) {
          ElMessage.error("用户已存在")
          return
        } else {
          ElMessage.error("修改失败!")
          return
        }
      }).catch(err => {
        console.log(err);

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style scoped>

</style>